<template>
  <el-card shadow="hover" class="video-container">
    <div class="video-wrapper">
      <video
          controls
          class="responsive-video"
      >
      <source
          :src="'/img'+url"
          type="video/mp4"
      >
      您的浏览器不支持视频播放。
      </video>
    </div>
    <el-button
        type="primary"
        class="fullscreen-btn"
        @click="openFullscreen"
    >
      全屏播放
    </el-button>
  </el-card>
</template>

<script setup>
import { useRoute } from 'vue-router';
import {ref} from "vue";
const route = useRoute();
const url = ref(route.query.url);

const lj = ref("http://localhost:8080/boke/myboke/"+url);

console.log(lj.value);
const openFullscreen = () => {
  const video = document.querySelector('.responsive-video');
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {  // Safari
    video.webkitRequestFullscreen();
  }
};
</script>

<style scoped>
/* 卡片容器 */
.video-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px;
}

/* 视频包装层（控制宽高比） */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: 4px;
}

/* 自适应视频 */
.responsive-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 或使用 contain 避免裁剪 */
}

/* 全屏按钮 */
.fullscreen-btn {
  margin-top: 16px;
  width: 100%;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .video-container {
    padding: 8px;
  }
}
</style>